{% extends "base.html" %}

{% block meta %}
    <meta name="menu-tag" content="22"/>
{% end block %}

{% block main %}
<div class="container">
    <h3>所有实验课程：</h3>
    <hr/>
    <!-- 左侧可伸缩菜单栏开始 -->
    <div class="col-md-3">
        <div class="panel-group" id="accordion" data-bind="foreach:lablist">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion"
                            data-bind="attr:{href:'#panel' + courseid}">
                            <strong data-bind="text:coursename"></strong>
                        </a>
                    </h4>
                </div>
                <div data-bind="attr:{id:'panel' + courseid}, css:{'in':courseid==3}" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="list-group" style="margin:0" data-bind="foreach:chapters">
                            <a class="list-group-item" href="#"
                                data-bind="css:{'active':$data==$root.selectedChapter()}, click:$root.onChapterChanged">
                                <span data-bind="text:chaptername"></span>
                                <span class="badge" data-bind="text:labs.length"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 左侧可伸缩菜单栏结束 -->
    
    <!-- 页面主内容开始 -->
    <div class="col-md-9" data-bind="with:selectedChapter">                
        <div id="lablist" data-bind="foreach:labs">
            <div class="alert alert-success" 
                data-bind="css:{'alert-danger':labtype==2 && enabled==1,'alert-success':labtype==1 && enabled==1, 'alert-info':enabled==0}">
                <b data-bind="text:labname"></b>
                <span class="pull-right" data-bind="visible: enabled==1">
                    <a type="button" class="btn btn-primary btn-xs fa fa-play-circle" title="进入实验"
                        data-bind="attr:{href:'lab_home?code=' + labcode}" target="newtab"></a>
                    <a type="button" class="btn btn-danger btn-xs fa fa-recycle" title="重新加载实验包"
                        data-bind="click:$root.reloadLab"></a>
                </span>
                <span class="pull-right" data-bind="visible: enabled==0">
                    当前实验未开放
                </span>
            </div>
        </div>
    </div>
    <!-- 页面主内容结束 -->
</div>

{% end block %}


{% block script %}
<script type="text/javascript">
    function Course(courseid, coursename, coursecode){
        var self = this;
        self.courseid = courseid;
        self.coursename = coursename;
        self.coursecode = coursecode;
        self.chapters = [];
    }

    function Chapter(chapterid, chaptername, chaptercode){
        var self = this;
        self.chapterid = chapterid;
        self.chaptername = chaptername;
        self.chaptercode = chaptercode;
        self.labs = [];
    }

    function Lab(labid, labname, labcode, labtype, enabled){
        var self = this;
        self.labid = labid;
        self.labname = labname;
        self.labcode = labcode;
        self.labtype = labtype;
        self.enabled = enabled;
    }

    function ModelView(){
        var self = this;
        self.lablist = ko.observableArray();
        self.selectedChapter = ko.observable();

        self.onChapterChanged = function(){
            self.selectedChapter(this);
        };

        self.reloadLab = function(){
            labCode = this.labcode
            bootbox.confirm('重新加载实验包将会覆盖原有实验包，是否继续？', function(choice){
                if(choice){
                    requestData = {
                        operation : 'load_lab_files',
                        path : labCode
                    };
                    $.ajax({
                        url: '/labstorage',
                        type: "POST",
                        data: JSON.stringify(requestData),
                        dataType: 'JSON',
                        success:function(jsonResult){
                            if(jsonResult.success){
                                bootbox.alert('加载成功');
                            } else{
                                bootbox.alert(jsonResult.message);
                            }
                        }
                    });
                }
            });
        };
    }		

    function load_data(chapterid){
        $.getJSON("/lab?operation=get_all_labs", function(jsonResult){
            var courses = [];
            var course_set = new Set();
            var chapter_set = new Set();
            var current_course = null;
            var current_chapter = null;
            var current_lab = null;
            for(var i=0;i<jsonResult.data.length;i++){
                var item = jsonResult.data[i];
                if (!course_set.has(item.courseid)){        // 新的课程，同时也是新的章节
                    current_course = new Course(item.courseid, item.coursename, item.coursecode);
                    courses.push(current_course);
                    course_set.add(item.courseid);
                    current_chapter = new Chapter(item.chapterid, item.chaptername, item.chaptercode);
                    current_course.chapters.push(current_chapter);
                    chapter_set.add(item.chapterid);
                    current_lab = new Lab(item.labid, item.labname, item.labcode, item.labtype, item.enabled)
                    current_chapter.labs.push(current_lab);
                    continue;
                }
                if (!chapter_set.has(item.chapterid)){       // 已有课程中的新章节
                    current_chapter = new Chapter(item.chapterid, item.chaptername, item.chaptercode);
                    current_course.chapters.push(current_chapter);
                    chapter_set.add(item.chapterid);
                    current_lab = new Lab(item.labid, item.labname, item.labcode, item.labtype, item.enabled)
                    current_chapter.labs.push(current_lab);
                    continue;
                }
                // 已有课程、已有章节中的新实验
                current_lab = new Lab(item.labid, item.labname, item.labcode, item.labtype, item.enabled)
                current_chapter.labs.push(current_lab);
            }

            modelView.lablist(courses);
            modelView.selectedChapter(courses[2].chapters[0]);

            $(".list-group-item").click(function(){
                $(".list-group-item").removeClass("active")
                $(this).addClass("active")
            });
        });
    }

    var modelView = new ModelView();
    ko.applyBindings(modelView);

    $(document).ready(function(){
        load_data()
    });
</script>
{% end block %}
